nudge.AlarmMonitor = {
    playerObj:null,
    init:function(){
        var thiz = this;
        // set container
        thiz.setContainerHeight();
        //实时过图
        thiz.realTimeFigure();
        // 轮播和详情页
        if($('#tabPic li').length == 1){ //右侧只有一张图时
            $(".rightImgBox li").css("width",82+"%");
            var rightImgBoxW = $(".rightImgBox").width(),
                rightImgBoxH = $(".rightImgBox").height(),
                liW = $(".rightImgBox li").width(),
                liH = $(".rightImgBox li").height();
                $(".rightImgBox li").css({
                    position:"absolute",
                    left:((rightImgBoxW - liW)/2) + "px",
                    top:((rightImgBoxH - liH)/2) + "px"
                });
                $('#tabPic li').on("click",function(){
                    var $this = $(this);
                    thiz.showDetail($this);
                });
        }else if($('#tabPic li').length > 1){
            thiz.carouselAndDetail();
        }
        thiz.resetDetail();
        //定时器判断右下角是否有报警图
        thiz.whetherAlarm();
    },
    // set container
    setContainerHeight: function() {
        // 设置container总高度
        var thiz = nudge.AlarmMonitor,
            windowH = $(window).height(),
            headerH = $('.header').outerHeight(true),
            containerH = windowH - headerH - 20;
        $('.main-container,.contBox').css('minHeight', containerH + 'px');
        $('.tabContent').css('height',$(".contBox").height() - $(".tabCard").height() - 20 + 'px');
        //left，center，right三部分样式
        var tabContentH = $('.tabContent').height();
        $('.leftBox,.rightDown').height(tabContentH);
        // 轮播图动态样式
        var $carouseLi = thiz.getCarouseLi();
        // 基数
        var baseInfo = {
            left: 20,
            top: 12 
        };
        // 偏移量
        var offset = {
            left: 3,
            top: 4
        };
            
        $carouseLi.each(function(i, obj) {
            var $this = $(this);
            $this.css({
                zIndex: $carouseLi.length - (i + 1),
                left:baseInfo.left + offset.left * i + '%',
                top: baseInfo.top + offset.top * i + '%'
            }).attr('data-index', i);
        });
    },
    //左上角实时过图
    realTimeFigure:function(){
        var thiz = this;
        var imgs = ["../content/images/alarmMonitor/pic.png"];
        thiz.playerObj = $.xrayImagePlayer({
            container: $("#xPlugDiv"),
            imgs: imgs
        });
    },
    // 获取轮播的li的dom
    getCarouseLi() {
        return $('#tabPic li');
    },
    // 轮播和详情页
    carouselAndDetail: function () {
        var thiz = nudge.AlarmMonitor;

        // 图片点击进入详情
        layui.use('layer', function() {
            var $tabLi = $('#tabPic li');
            var tabLen = $tabLi.length;
            $tabLi.on('click', function() {
                var $this = $(this);
                var zIndex = $this.css('zIndex');
                
                if(tabLen > 1){
                    if (zIndex == tabLen - 1) {
                        thiz.showDetail($this);
                    }
                    else {
                        var changeIndex = thiz.getChangeIndex('next', $this);
                        thiz.changeCarousel(changeIndex);
                    }
                }else if(tabLen == 1){ //只有一张图时直接显示详情页
                    thiz.showDetail($this);    
                }
                
            });

            // 轮播图上/下张
            $(document).on('keyup', function (event) {
                var keyCode = event.which || event.keyCode;
                switch (keyCode) {
                    case 37:    // 左箭头
                        var changeIndex = thiz.getChangeIndex('prev');
                        thiz.changeCarousel(changeIndex);
                        break;
                    case 38:    // 上箭头
                        break;
                    case 39:    // 右箭头
                        var changeIndex = thiz.getChangeIndex('next');
                        thiz.changeCarousel(changeIndex);
                        break;
                    case 40:    // 下箭头
                        break;
                    default:
                        break;
                }
            });
        });
    },
    // 根据类型/dom获取changeIndex
    getChangeIndex: function (type, $this) {
        var thiz = this;
        var changeIndex = 0;
        var $courseLi = thiz.getCarouseLi();
        switch (type) {
            case 'prev':    // 上一张
                changeIndex = thiz.getPrev();
                break;
            case 'next':    // 下一张
                changeIndex = thiz.getNext();
                break;
            default:
                if ($this) {
                    var thisIndex = $this.data('index');
                    $courseLi.each(function (index, dom) {
                        var $dom = $(dom);
                        var domIndex = $dom.data('index');
                        if (thisIndex === domIndex) {
                            changeIndex = index;
                        }
                    });
                }
                break;
        }
        return changeIndex;
    },
    // 切换轮播图z-index
    changeCarousel: function(changeIndex) {
        var thiz = this;

        // 轮播切换
        var $now = thiz.findNowCarousel();
        var nowIndex = $now.data('index');

        // 获取要改变的dom
        var $courseLi = thiz.getCarouseLi();
        var $change = $courseLi.eq(changeIndex);

        // 原来的值缓存
        var nowLeft = $now[0].style.left;
        var nowTop = $now[0].style.top;
        var nowZIndex = $now.css('zIndex');
        var changeLeft = $change[0].style.left;
        var changeTop = $change[0].style.top;
        var changeZIndex = $change.css('zIndex');

        // 单个宽度
        var width = $now.width();
        // 动画时间
        var speed = 600;

        // 开始动画前，先隐藏其他的，并显示当前需要活动的
        // thiz.resetCarousel($courseLi, nowZIndex, changeZIndex);

        $now.stop().animate({left: -.3 * width}, speed, function () {
            $now.css({
                zIndex: changeZIndex
            }).animate({
                left: changeLeft,
                top: changeTop
            }, speed);
        });

        $change.stop().animate({left: 1.3 * width}, speed, function () {
            $change.css({
                zIndex: nowZIndex
            }).animate({
                left: nowLeft,
                top: nowTop
            }, speed);
        })
    },
    // 
    resetCarousel($courseLi, nowZIndex, changeZIndex) {
        var moveIndexs = [nowZIndex, changeZIndex];
        $courseLi.each(function(index, dom) {
            var $dom = $(dom);
            var domZIndex = $dom.css('zIndex');
            if (!~moveIndexs.indexOf(domZIndex)) {
                $dom.hide();
            }
            else {
                $dom.show();
            }
        });
    },
    // 获取上一个轮播图
    getPrev() {
        var thiz = nudge.AlarmMonitor;
        var $now = thiz.findNowCarousel();
        var nowIndex = $now.data('index');
        var $courseLi = thiz.getCarouseLi();
        var courseLen = $courseLi.length;
        return nowIndex === 0 ? courseLen - 1 : nowIndex - 1;
    },
    // 获取下一个轮播图
    getNext() {
        var thiz = nudge.AlarmMonitor;
        var $now = thiz.findNowCarousel();
        var nowIndex = $now.data('index');
        var $courseLi = thiz.getCarouseLi();
        var courseLen = $courseLi.length;
        return nowIndex === courseLen - 1 ? 0 : nowIndex + 1;
    },
    // 当前轮播图
    findNowCarousel: function () {
        var thiz = this;
        var $carouseLi = thiz.getCarouseLi();
        var $now;
        $carouseLi.each(function(i, obj) {
            var $obj = $(obj);
            var zIndex = $obj.css('zIndex');
            if (+zIndex == $carouseLi.length - 1) {
                $now = $obj;
            }
        });
        return $now;
    },
    whetherAlarm(){
        var timer,
            isAlarm = false;  //该变量用来判断是否报警
        if(isAlarm){  //没图
            $(".rightDown").css("border","none");
            $("#tabPic").hide();
            var videoList = $(".videoList").clone();
            $(".monitor").addClass("noMonitor").find(".videoList").remove();
            $(".rightBox").addClass("noMonitorRightBox");
            $(".rightDown").append(videoList);
            videoList.addClass("rightVideo");
        }else{
            $(".rightDown").css("border","1px solid #ccc");
            $(".monitor").removeClass("noMonitor");
            $(".topPic").removeClass(".noMonitorTopPic");
            $(".rightBox").removeClass("noMonitorRightBox");
            var videoListHtml = $(".rightVideo").clone().remove();
            $(".leftBox").append(videoListHtml);
        }
    },
    // 展示详情
    showDetail: function($this) {
        $.get('./alarmMonitorDetail.html', {}, function(str) {
            $this.attr('method', 'offset');
            $this.attr('type', 'auto');
            var method = $this.attr('method');
            var type = $this.attr('type');
            layer.open({
                type: 1,
                offset: type,
                title: ['详情页'],
                id: 'tabPic' + type,    // 防止重复弹出
                content: str,
                btn: false,
                btnAlign: 'c',          // 按钮居中
                shade: 1,               // 不显示遮罩
                yes: function() {
                    layer.closeAll();
                },
                area: ['1000px']
            });
        });
    },
    //
    resetDetail: function() {
        $('.detailList').height($('.picList').height());
    }
}

nudge.ready(function(){nudge.AlarmMonitor.init()});